﻿
    
    <s:ScatterViewItem CanRotate="False" CanMove="True"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:s="http://schemas.microsoft.com/surface/2008"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"      
             xmlns:ae="clr-namespace:LADSArtworkMode"
             xmlns:my="http://schemas.microsoft.com/surface/2008" xmlns:System_Windows_Documents="clr-namespace:System.Windows.Documents;assembly=PresentationUI" 
             x:Class="LADSArtworkMode.HotspotDetailsControl" 
                       
        Name="scatterItem" CanScale="True" Height="320" Width="422" Loaded="scatterItem_Loaded" Orientation="0" SizeChanged="scatterItem_SizeChanged">
    <Border BorderBrush="#214236" BorderThickness="4" CornerRadius="4">
        <Canvas Name="hotspotCanvas" Background="#618276" Opacity="0.95">
           
       
            <s:SurfaceScrollViewer Name="textBoxScroll" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Height="272" Width="366" Canvas.Top="35" Canvas.Left="12" Background="#ccd6c1" BorderThickness="2">
                <s:SurfaceTextBox Name="HotspotTextBox" Height="272" Width="366" TextWrapping="Wrap" IsReadOnly="True" />
                   
            </s:SurfaceScrollViewer>
                <Image Name="HotspotImage" Height="272" Width="380"/>
            <Canvas Name="videoCanvas" Background="Transparent">
                <UserControl Name="video"></UserControl>
            </Canvas>
            <StackPanel Name="VideoStackPanel">
                <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                    <s:SurfaceButton Name="SurfacePlayButton" Content ="Play/Pause" Width="80" Height="20" Click="SurfacePlayButton_Click" Margin="5">
                    </s:SurfaceButton>
                    <s:SurfaceSlider Name="SurfaceTimelineSlider" Margin="5" ValueChanged="SurfaceTimelineSlider_ValueChanged"  Width="70"/>
                </StackPanel>
            </StackPanel>
        
            <StackPanel Name="AudioScroll" Height="272" Width="366" Background="#618276" Canvas.Top="35" Canvas.Left="12" Visibility="Hidden" >
                
                
                <s:SurfaceSlider Name="timelineSlider" Margin="0" Height ="0" Width="250" HorizontalAlignment="Center" Background="#618276" Foreground="Red" Visibility="Visible" Thumb.DragStarted="timelineSlider_DragStarted" Thumb.DragCompleted="timelineSlider_DragCompleted"/>
           
                <StackPanel Width="260" Orientation="Horizontal">

                    <s:SurfaceButton Name="PlayButton"  Margin="40,10,10,10" Height="38" Width="38" Padding="0" Background ="#618276">
                        <Polygon x:Name ="playIcon" Points="4,5 4,32 25,17" Fill="Green" Opacity=".5" Visibility="Visible" Margin="5,0,0,0"
                                Stroke="Black" StrokeThickness="1"
                                HorizontalAlignment="Center" VerticalAlignment="Center" Height="36" Width="30" />
                        </s:SurfaceButton>
                    <s:SurfaceButton Name="PauseButton"  Height="40" Width="40" Padding="5,3,0,0" Background ="#618276" Margin="0">
                        <Grid Height="34" Width="26">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="12*" />
                                <ColumnDefinition Width="0*" />
                            </Grid.ColumnDefinitions>
                            <Polygon x:Name="pauseIconLeft" Points="1,0 1,30 9,30, 9,0" Fill="Blue" Opacity=".5" Visibility="Visible" Height=" 30"
                            Stroke="Black" StrokeThickness="1"
                            HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0" Width="29" Grid.ColumnSpan="2" />

                            <Polygon x:Name ="pauseIconRight" Points="15,-1 15,30 23,30, 23,-1" Fill="Blue" Opacity=".5" Visibility="Visible"
                            Stroke="Black" StrokeThickness="1"
                            HorizontalAlignment="Right" VerticalAlignment="Center" Height="30" Margin="0,2,-13,2" Width="36" Grid.ColumnSpan="2" />
                        </Grid>
                    </s:SurfaceButton>
                    <s:SurfaceButton Name="StopButton"  Margin="10" Height="40" Width="40" Background ="#618276" Padding="0">
                        <Polygon x:Name ="stopIcon" Points="0,0 0,30 30,30, 30,0" Fill="Red" Opacity=".5" Margin="5"
                        Stroke="Black" StrokeThickness="1"
                        HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </s:SurfaceButton>
                 
                </StackPanel>

                    <Grid  Width="250" HorizontalAlignment="Center">

                    <s:SurfaceButton Name="MuteButton"  Background="Transparent" Width="32" Height="32" HorizontalAlignment="Left" Canvas.Left="15"  Click="MuteButton_Click" >
                        <Image Name="Volume" Width="32" Height="32" HorizontalAlignment="Left" Canvas.Left="0" />
                    </s:SurfaceButton>
                 
                    <s:SurfaceSlider Name="volumeSlider" Width="100" Height="25" Background ="#618276" Canvas.Left="35" Minimum="0" Maximum="1" Value="0.5" ValueChanged="volumeSlider_ValueChanged"/>
                       
                    </Grid>
                <!-- Ths slider shows the progress of the media. -->
                            

                <StackPanel.Triggers>
                    <EventTrigger RoutedEvent="Image.MouseDown" SourceName="PlayButton">
                        <EventTrigger.Actions>
                            <BeginStoryboard Name= "myBegin">
                                <Storyboard SlipBehavior="Slip">

                                    <!-- The MediaTimeline controls the timing of the video and acts like other Timeline objects.  
                 For example, although the video clip (numbers.wmv) lasts longer, playback ends after six  
                 seconds because that is the duration of the MediaTimeline (Duration="0:0:6"). -->
                                    <!--<MediaTimeline Name="mediaTimeLine" Storyboard.TargetName="myMediaElement" BeginTime="0:0:0"  CurrentTimeInvalidated="MediaTimeChanged" /> -->

                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>

                    <!-- These triggers impliment the functionality of the Pause, Resume
         and Stop buttons.-->
                    <EventTrigger RoutedEvent="Image.MouseDown" SourceName="PauseButton">
                        <EventTrigger.Actions>
                            <PauseStoryboard BeginStoryboardName="myBegin" />
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Image.MouseDown" SourceName="StopButton">
                        <EventTrigger.Actions>
                            <StopStoryboard BeginStoryboardName="myBegin" />
                        </EventTrigger.Actions>
                    </EventTrigger>
                </StackPanel.Triggers>

            </StackPanel>


            <Label Content="Label" Height="28" HorizontalAlignment="Left" x:Name="Name" VerticalAlignment="Top" FontSize="16" MinWidth="0" MinHeight="0" Width="335" Padding="5,3,0,0" FontWeight="Bold" Foreground="White" Canvas.Top="3" Canvas.Left="7" />
        <my:SurfaceButton  Content="Close" Height="24" HorizontalAlignment="Right" x:Name="closeButton" VerticalAlignment="Center" Width="48" FontSize="11" MinWidth="0" MinHeight="0" Padding="0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="White" Background="{x:Null}" FontWeight="Bold" FontStyle="Normal" Click="closeButton_Click" Grid.Row="1" Grid.ColumnSpan="2" Canvas.Top="6" Canvas.Right="10" />
       
    </Canvas>
 </Border>
    <!--</UserControl>-->
</s:ScatterViewItem>